/* eslint-disable no-unused-vars */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/alt-text */
import React, { useState, CSSProperties } from 'react';
import { BarsOutlined } from '@ant-design/icons';
import logo from '@/assets/images/logo.png';
import classnames from 'classnames';
import { Transition } from 'react-transition-group';
import './index.scss';

const duration = 1000;
// 默认样式
const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
};
interface TransitionStyles {
  entering: CSSProperties;
  entered: CSSProperties;
  exiting: CSSProperties;
  exited: CSSProperties;
}
const transitionStyles: TransitionStyles = {
  entering: { opacity: 1 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 },
  exited: { opacity: 0 },
};

interface Props {
  currentCategory: string;
  setCurrentCategory: (currentCategory: string) => string;
}

function HomeHeader(props: Props) {
  const [isMenuVisible, setIsMenuVisible] = useState(false);
  const setCurrentCategory = (event: React.MouseEvent<HTMLUListElement>) => {
    const target: HTMLUListElement = event.target as HTMLUListElement;
    const category: string = target.dataset.category as string;
    props.setCurrentCategory(category);
    setIsMenuVisible(false);
  };
  return (
    <header className="home-header">
      <div className="logo-header">
        <img src={logo} />
        <BarsOutlined onClick={() => setIsMenuVisible(!isMenuVisible)} />
      </div>

      <Transition in={isMenuVisible} timeout={duration}>
        {(state: keyof TransitionStyles) => (
          <ul
            className="category"
            onClick={setCurrentCategory}
            style={{
            ...defaultStyle,
            ...transitionStyles[state]
            }}
          >
            <li data-category="all" className={classnames({ active: props.currentCategory === "all" })}>全部</li>
            <li data-category="react" className={classnames({ active: props.currentCategory === "react" })}>React</li>
            <li data-category="vue" className={classnames({ active: props.currentCategory === "vue" })}>Vue</li>
          </ul>
        )}
      </Transition>
    </header>
  );
}

export default HomeHeader;
